import React from 'react';
import { Row, Popover } from 'antd';
import { WeaLocaleProvider, WeaInput, WeaHelpfulTip, WeaError } from 'ecCom';
import PopoverContent from './PopoverContent';
import './index.less';

const getLabel = WeaLocaleProvider.getLabel;

export default class DefaultVal extends React.Component {
  input = React.createRef();
  state = { visible: false };

  setValueToTextarea(textarea, key, val) {
    const { selectionStart,selectionEnd } = textarea;

    if (document.selection) {
      const sel = document.selection.createRange();

      sel.text = key;
    } else if (_.isNumber(selectionStart) && _.isNumber(selectionEnd)) {
      val = val.substring(0, selectionStart) + key + val.substring(selectionEnd, val.length);
      setTimeout(() => {
        textarea.selectionStart = textarea.selectionEnd = selectionStart + key.length;
      });
    } else {
      val += key;
    }
      textarea.focus();

    return val;
  }

	insert = (value) => {
    const { onChange } = this.props;
    const Input = this.input.current.refs.inputNormal.refs.input.refs.input;
		
		if (Input && value) {
      const val = this.setValueToTextarea(Input, value, Input.value); // 插入字段之后的值
      
      onChange(val);
		}
  }

  onVisibleChange = (visible) => {
    const clickEle = window.event && window.event.target;
    let flag = false;
    let parentNode;

    if (clickEle) {
      parentNode = clickEle.parentNode;
    }

    if (!visible && parentNode) {
      while (parentNode.nodeName.toLowerCase() != 'body') {
        const parentClassName = parentNode.className;

        if (parentClassName.indexOf('wea-edc-param-parent') > -1) {
          flag = true;
          break;
        }

        parentNode = parentNode.parentNode;
      }
    }

    this.setState({ visible: flag || visible });
  }

  onChange = (val) => {
    const { onChange, validate } = this.props;
    let value = val;
    
    // 判断是否有系统变量字段或指定参数
    const hasVarible = !!value.match(/\{[^\}]+\}/);

    if (validate && !hasVarible) {
      const valid = validate({ value });
      
      if (!valid) {
        value = '';
        
        this.refs.weaError.showError();
      }
    }

    onChange(value);
  }

  render() {
    const { value, helpfulTip, errorTip } = this.props;
    const { visible } = this.state;

    return (
      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9ja7g9`}>
        <label className="wea-edc-defval-label">
          {getLabel(502451, '默认值')}
          { helpfulTip && <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@fqcw6e`} title={helpfulTip} />}
        </label>
        <div className="wea-edc-item-default-val">
          <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@bu4nfu`}
            tipPosition="bottom"
            ref="weaError"
            error={errorTip}
          >
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@7h5ylq`}
              {...this.props}
              value={value}
              onBlur={this.onChange}
              ref={this.input}
            />
          </WeaError>
          <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@utp1w1`}
            content={<PopoverContent ecId={`${this && this.props && this.props.ecId || ''}_PopoverContent@su5fkc`} insert={this.insert} visible={visible} />}
            trigger="click"
            overlayClassName="wea-edc-form-item-def-insert"
            placement="bottom"
            onVisibleChange={this.onVisibleChange}
            visible={visible}
          >
            <i className="icon-coms-mubanshezhi" />
          </Popover>
        </div>
      </Row>
    );
  }
}